<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="编辑教育经历"
        right-text="保存"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>
    <div style="padding: 0 5%">
      <div class="box">
        <p>学校</p>
        <van-field v-model="value" placeholder="请输入学校名称" />
      </div>
      <div class="box">
        <p>学历</p>
        <van-cell is-link :title="title" @click="show = true" />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          @select="onSelect"
        />
      </div>
      <div class="box">
        <p>专业</p>
        <van-field v-model="value1" placeholder="请输入专业名称" />
      </div>
    </div>
  </div>
</template>



<script>
import Vue from 'vue'
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      value: "",
      value1: "",
      user_id: "",
      show: false,
      title: "本科",
      show1: false,
      actions: [
        { name: "专科" },
        { name: "本科" },
        { name: "硕士" },
        { name: "博士" },
      ],
    };
  },
  mounted() {
    this.user_id = localStorage.getItem("userId");
    this.axios({
      method: "post",
      url: "http://localhost:3000/sel_resume",
      data: {
        user_id: this.user_id,
      },
    }).then((res) => {
      let data = res.data.data[0];
      this.value = data.jl_school;
      this.title = data.jl_education;
      this.value1 = data.jl_major;
    });
  },

  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.title = item.name;
      console.log(item.name);
    },

    onClickLeft() {
      Dialog.confirm({
        message: "是否退出编辑",
      })
        .then(() => {
        this.$router.go(-1);

        })
        .catch(() => {
          // on cancel
        });

      //   confirm("确定返回");
    },
    onClickRight() {
      console.log(this.value, this.title, this.value1);
      this.axios({
        method: "post",
        url: "http://localhost:3000/updata_education",
        data: {
          user_id: this.user_id,
          school: this.value,
          education: this.title,
          major: this.value1,
        },
      });
      this.$router.go(-1);
    },
  },
};
</script>


<style scoped>
/deep/.van-nav-bar__text {
  color: black;
}
/deep/.van-nav-bar__arrow {
  color: black;
}
/deep/.van-cell {
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: balck;
}
.box {
  padding: 8px 0;
  position: relative;
  border-bottom: 1px solid #bbb;
}
</style>

